<template>
  <div class="flex">
    <template v-if="!noNetwork">
      <div class="flex-grow flex-scroll">
        <transition :name="transitionName">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
        </transition>     
      </div>
      <vue-footer v-model="selected"></vue-footer>
    </template>

    <div class="noNetworkMask flex-grow flex flex-center" v-else @click="reload">
      <div class="content">
        <img src="@img/sub/no-wifi@2x.png" width="80%">
        <div>网络连接失败，请点击重试</div>
      </div>
    </div>
  </div>
</template>

<script>
import VueFooter from '@c/footer/Footer'

export default {
  components: {
    VueFooter
  },

  data (){
    return {
      selected: 0,
      transitionName: 'move-in',
      noNetwork: false
    }
  },

  mounted (){
    _locationReady.catch(() => this.noNetwork = true)
  },

  watch: {
    selected (newVal, oldVal){
      this.transitionName = newVal > oldVal ? 'move-in' : 'move-out'
    }
  },

  methods: {
    reload (){
      location.reload()
    }
  }
}
</script>

<style lang="less" scoped>
.indexContainer{
  position: relative;
}

.noNetworkMask{
  background-color: white;

  .content{
    text-align: center;
    color: @subtext;
    position: relative;
    top: -50px;
  }
}
</style>